import styled from 'styled-components'
export const DetailWrapper = styled.div`
    width:620px;
    margin:0 auto;
    padding-bottom:100px;

`

export const Header = styled.div`
    margin: 50px 0 20px 0;
    line-height:44px;
    font-size:34px;
    color: #333;
    font-weight:bold;
`
export const Writer = styled.div`
    margin:30px 0 100px;
    vertical-align:middle;
    .avatar{
        width:48px ;
        height: 48px;
        border-radius:24px;
        display:inline-block;
        vertical-align: middle;
    }
    .info{
        vertical-align: middle;
        display:inline-block;
        margin-left:8px;
    }
    .name{
        font-size:16px;
        margin-right:3px;
        vertical-align:middle;
    }
    .badge{
        margin-right:5px;
        width: 20px;
        height: 20px;
    }
    .btn{
        background:#42c02e;
        padding:0 7px 0 5px;
        border-radius:20px;
    }
    .meta{
        margin-top:5px;
        vertical-align:middle;
    }

`

export const Content = styled.div`
    color: #2f2f2f;
    img{
        width:100%;

    }
`
export const ItmeWrapper = styled.div`
    p{
        margin:25px 0;
        color: #2f2f2f;
        font-size:16px;
        line-height:30px;
    }
    h3{
        font-size:22px;
    }
    b{
        font-size:22px;
    }
`